<template>
  <el-tree
    ref="treeRef"
    :data="catalogInfo"
    :props="defaultProps"
    node-key="id"
    show-checkbox
    default-expand-all
    :expand-on-click-node="false"
    @check="handleChange"
  >
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <!-- 用带参的计算属性 -->
        <img :src="geoIcon(data.geoType)" />
        <span> {{ '  ' + node.label }} </span>
      </span>
    </template>
  </el-tree>
</template>

<script setup>
import { useCatalog } from './Hooks/useCatalog'
const { defaultProps, catalogInfo, treeRef, handleChange, geoIcon } = useCatalog()
</script>

<style scoped>
.el-tree {
  position: absolute;
  right: 5px;
  top: 50px;
  z-index: 100;
  width: 200px;
  /* background: #000; */
}
</style>
